<template>
  <div class="vs-loading" >
    <div class="grad" :class="{ active: show }"></div>
  </div>
</template>

<script>
export default {
  name:'VsLoading',
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    show: {
      immediate: true,
      handler(v) {
        if (v) {
          setTimeout(() => {
            this.$emit("update:show", false);
          }, 1000);
        }
      },
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>

<style lang="less" scoped>
.vs-loading {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  opacity: 1;
  height: 100%;
  width: 100%;
  .grad {
    width: 100%;
    height: 100%;
    position: absolute;
    transform: translateY(120%);
    z-index: 3;
    background-image: linear-gradient(#16386F, #070A17, #16386F);
      &.active {
      animation: myGrad 1s ease-in-out forwards;
    }
  }
  @keyframes myGrad {
    0% {
      transform: translateY(-20%);
    }
  }
}
</style>
